<script setup>
import { onMounted } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import TabBar from "@/components/TabBar/index.vue";
import { selectedRentWay } from '@/constants/mock.js';

function navigateToHome() {
  uni.navigateBack();
}
function navigateToOrderPay() {
	uni.navigateTo({
		url: "/pages/Rent/OrderPay/index"
	});
}
</script>

<template>
  <div class="container">
    <NavBar></NavBar>
    <div @click="navigateToHome" class="back-nav">
      <image
        src="@/static/icon/chevron-left.png"
        style="width: 14px; height: 14px"
      ></image>
      <text>订单</text>
    </div>
		<div class="car-card">
			<div class="car-image"></div>
			<div>
				<div class="car-title">
					<div class="title">车辆型号</div>
					<div class="detail">车辆详细信息</div>
				</div>
				<div class="info-list">
					<div class="info-item">
						<div class="info-title">快充时长</div>
						<div title="info">暂无</div>
					</div>
					<div class="info-item">
						<div class="info-title">慢充时长</div>
						<div title="info">暂无</div>
					</div>
					<div class="info-item">
						<div class="info-title">轴距</div>
						<div title="info">2700mm</div>
					</div>
				</div>
			</div>
		</div>
		<div class="car-info-list">
			<div class="car-info-item">
				<div title="car-info">{{selectedRentWay.range}}</div>
				<div class="car-info-title">租期</div>
			</div>
			<div class="car-info-item">
				<div title="car-info">{{selectedRentWay.age}}</div>
				<div class="car-info-title">车龄</div>
			</div>
			<div class="car-info-item">
				<div title="car-info">{{selectedRentWay.order}}</div>
				<div class="car-info-title">押金</div>
			</div>
			<div class="car-info-item">
				<div title="car-info">{{selectedRentWay.monthFee}}</div>
				<div class="car-info-title">月租</div>
			</div>
		</div>
		<div class="discount-card">
			<image
			  src="@/static/icon/rectangle.png"
			  style="width: 8px; height: 8px; margin-top: 4px; margin-right: 8px;"
			></image>
			<text>使用优惠券</text>
			<text class="discount-card-detail">您还有三张优惠券</text>
		</div>
		<div class="total-count-card">
			<div class="total-title">总金额</div>
			<div class="total-value">3000元</div>
		</div>
		<div class="op">
		  <div class="op-desc">点击下单前，请务必核实车型信息是否正确</div>
		  <button class="op-btn" @click="navigateToOrderPay">
		    下单
		  </button>
		</div>
	</div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
}

.back-nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
}
.car-card {
	display: flex;
	justify-content: space-between;
	
	width: 100%;
	height: 138px;
	padding: 20px;
	margin-bottom: 22px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
}
.car-image {
  width: 80px;
  height: 90px;
  border-radius: 20px;
}

.car-title {
	margin-left: 40px;
}

.title {
	font-size: 16px;
}

.detail {
	font-size: 12px;
	opacity: 0.5;
	margin-bottom: 25px;
}

.info-list {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 12px;
	width: 100%;
	gap: 36px;
}

.info-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.car-info-list {
	display: flex;
	justify-content: space-between;

	width: 100%;
	height: 72px;
	padding: 20px;
	margin-bottom: 22px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
}

.car-info-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.car-info {
	font-size: 16px;
	font-weight: 600;
	color: #000;
}

.car-info-title {
	font-size: 12px;
	opacity: 0.5;
	color: #000;
}

.discount-card {
	display: flex;
	
	width: 100%;
	height: 45px;
	padding: 10px 25px 20px;
	
	margin-bottom: 22px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
	
	font-size: 12px;
}
.discount-card-detail {
	opacity: 0.5;
	font-size: 12px;
	margin-left: 35px;
}
.total-count-card {
	display: flex;
	justify-content: space-between;
	
	width: 100%;
	height: 45px;
	padding: 10px 25px 20px;
	
	margin-bottom: 22px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
}
.total-title {
	font-size: 12px;
}
.total-value {
	font-size: 16px;
	font-weight: 600;
}

.op {
  width: 100%;
  position: fixed;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: -20px;
  padding: 0 20px;
  box-sizing: border-box;
}

.op-desc {
  width: 100%;
  display: flex;
  justify-content: center;
}

.op-btn {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px 0 0 0;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  border-radius: 10px;
  box-sizing: border-box;
}
</style>
